<template>
    <div class="flex-row how-select-body">
        <FullHeadImg backImage="marketplace/hp_head_bg.png">
            <template #default>
                <h1>How we select projects?</h1>
            </template>
        </FullHeadImg>

        <section class="how-select body-m">
            <p>
                We say NO a lot. Fewer than 5% of startups make it through our vetting process. Out of thousands of
                applications, only a select few are chosen to launch on Honeybee. Here’s how we decide who makes the
                cut:
            </p>
            <div class="how-select-items">
                <div class="how-select-item" v-for="(item, idx) in howSelectProjectConfig.selectProjectItems">
                    <img :src="getImage(item.image)" alt="">
                    <div>{{ item.title }}</div>
                </div>
            </div>
        </section>

        <ul class="how-select-steps">
            <li class="out-step" v-for="(item, idx) in howSelectProjectConfig.selectProjectSetps" :key="idx">
                <div class="body-m">
                    <h3>{{ idx + 1 }}. {{ item.title }}</h3>
                    <p class="step-desc"><b>{{ item.desc }}</b></p>
                    <ul>
                        <li class="gradient-card" v-for="(step, idx) in item.steps" :key="idx">
                            <h4>{{ step.title }}</h4>
                            <p>{{ step.desc }}</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

        <section class="what-gives body-m">
            <h2>
                What gives us an edge in spotting great startups?
            </h2>
            <div v-for="(item, idx) in howSelectProjectConfig.whatGivesItems">
                <div class="what-gives-title">
                    <img :src="getImage(item.image)" alt="">
                    <h3>{{ item.title }}</h3>
                </div>
                <p>{{ item.desc }}</p>
            </div>
        </section>

        <section></section>
    </div>
</template>

<script setup lang="ts" name="HowSelectProject">
import marketPlace from '@/utils/marketPlaceConfig';
import { computed } from 'vue';

const howSelectProjectConfig = computed(() => {
    return marketPlace.howSelectProject
});

</script>

<style scoped lang="scss">
.how-select-body {
    flex-direction: column;
}

.how-select {
    .how-select-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding-top: 2rem;

        .how-select-item {
            padding-top: 1rem;

            img {
                width: 100px;
            }

            div {
                font-weight: 600;
            }
        }
    }
}

.how-select-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .out-step {

        h3,
        .step-desc {
            padding-bottom: 1rem;
        }

        ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;

            h4 {
                font-size: 1.2rem;
                text-align: center;
                padding-bottom: 1rem;
            }
        }
    }
}

.what-gives {
    padding: 1rem 0;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    background-image: url('/public/images/marketplace/hp_cc_bg.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right center;


    h2 {
        padding-bottom: 1rem;
    }

    .what-gives-title {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 10px;

        img {
            width: 30px;
            height: 30px;
        }
    }
}

@media (max-width: 650px) {
    .how-select-steps .out-step ul {
        grid-template-columns: repeat(1, 1fr);
    }
}
</style>